<template>
  <div id="search">
    <span>储存管理</span>
    <select name="Smanagement" id="Smanagement">
      <option value="">全部</option>
    </select>
    <div class="block" style="display:inline-block;">
      <span class="demonstration">创建日期</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions" @change="datesearch">
      </el-date-picker>
    </div>
    <input type="text" placeholder="患者姓名/手机号码/会员卡号" v-model="search" @keydown.enter="searchfun">
    <button @click="searchfun">搜索</button>
    <input type="checkbox">会员预警到期
  </div>
</template>

<script>
export default {
  data() {
      return {
        search:"",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
    },
  methods:{
    searchfun(){
      this.$emit("searchParent",this.search)
    },
    datesearch(){
      console.log(this.value2);//一个数组
      this.$emit("searchdate",this.value2);
    }
  }
}
</script>

<style lang="less">
  #search{
    line-height:80px;
    span:nth-child(1){
      margin-right:20px;
    }
    select{
      width:120px;
      margin-right:30px;
    }
    span:nth-child(3){
      margin-right:20px;
    }
    input:nth-child(4){
      width:200px;
      margin-right:26px;
    }
    input:nth-child(5){
      width:220px;
    }
    input:nth-last-child(1){
      margin-left:34px;
      margin-right:12px;
    }
    .el-date-editor .el-range__icon{
      transform:translate(0,0px;)
    }
  }
</style>